<template>
    <div class="tree">
        <el-tree
            ref="organizeTree"
            v-loading="!treeList.length"
            :data="treeList"
            :props="treeNeedProps"
            node-key="id"
            :default-expanded-keys="['0']"
            :expand-on-click-node="false"
            :render-content="renderContent"
            :lazy="true"
            :load="hanldeLoad"
        ></el-tree>
    </div>
</template>

<script>
import { getParentNode } from '@/utils/tree.ts'

export default {
    props: {
        /** 组织树 */
        treeList: {
            type: Array,
            required: true
        }
    },
    data() {
        return {
            /** 传入tree结构的整体格式 */
            treeNeedProps: {
                children: 'children',
                label: 'label'
            }
        }
    },
    methods: {
        /** 添加组织 */
        addNode(data) {
            /**
             * 一个数组，获取点击添加的节点的所有父节点value值
             */
            const parentsNodeName = getParentNode(this.treeList, data.id)

            // 将点击的父节点们外抛当前上级模块
            this.$emit('addTreeNode', parentsNodeName)
        },

        /** 自定义tree函数组件
         * 用于包含more标签
         */
        renderContent(h, { node, data }) {
            return (
                <span class="custom-tree-node">
                    <i
                        class={
                            data.children
                                ? 'iconfont icon-establishment-sign-o-'
                                : 'iconfont icon-department'
                        }
                    ></i>
                    <span title={node.label} class="text">
                        {node.label}
                    </span>
                    <span>
                        <i
                            class="el-icon-more more-icon el-popover__reference"
                            aria-describedby="el-popover-5035"
                            tabindex="0"
                        ></i>
                        <dl>
                            <dd>编辑</dd>
                            <dd
                                onclick={e => {
                                    e.preventDefault()
                                    this.addNode(data)
                                }}
                            >
                                添加
                            </dd>
                            {data.id !== 0 ? <dd>删除</dd> : ''}
                        </dl>
                    </span>
                </span>
            )
        },

        /** 组织树赖加载 */
        hanldeLoad(node, resolve) {
            if (node.level === 0) {
                resolve(node.data)
                return
            }

            const hasChild = !!node.data.children
            setTimeout(() => {
                let data
                if (hasChild) {
                    data = node.data.children
                } else {
                    data = []
                }
                resolve(data)
            }, 500)
        }
    }
}
</script>

<style lang="less" scoped>
.tree {
    width: 255px;
}

/* 自定义树样式 */
/deep/ .custom-tree-node {
    display: flex;
    position: relative;
    -webkit-box-align: center;
    align-items: center;
    .iconfont {
        color: #7f8997;
    }
    .text {
        font-size: 14px;
        margin-left: 5px;
    }
    /* more图标的显示与隐藏 */
    .el-icon-more {
        visibility: hidden;
        margin-left: 14px;
        &:hover + dl > dd {
            display: block !important;
        }
    }
    &:hover {
        & .el-icon-more {
            visibility: visible !important;
        }
    }

    /** 自定义弹出框 */
    dl {
        position: absolute;
        top: 15px;
        right: -30px;
        z-index: 10;
        background: #fff;
        display: block;
        text-align: left;
        dd {
            z-index: 10;
            width: 70px;
            height: 32px;
            text-align: center;
            color: #7f8997;
            display: none;
            &:hover {
                background: #f7f8f8;
                color: #001330;
                display: block;
            }
        }
        &:hover dd {
            display: block;
        }
    }
}

/deep/ .el-tree-node .el-tree-node__children {
    overflow: visible;
}
</style>
